<template>

    <div class="app">
    <h2>Vue3组件间通信</h2>  

        <div class="header">
            <div class="Navs">
                <RouterLink :to="{name:'Props'}" active-class="active">1.props</RouterLink>
                <RouterLink to="/zdingyi1" active-class="active">2.自定义事件</RouterLink>
                <RouterLink to="/mitt" active-class="active">3.mitt</RouterLink>
                <RouterLink to="/Father" active-class="active">4.v-model</RouterLink>
                <RouterLink to="/attrs" active-class="active">5.$attrs</RouterLink>
                <RouterLink to="/FaTher2" active-class="active">6._$refs-$parent</RouterLink>
                <RouterLink to="/FaTher3" active-class="active">7._provide-inject</RouterLink>
                <RouterLink to="/Count" active-class="active">8.pinia</RouterLink>
                <RouterLink to="/Father4" active-class="active">9.solt</RouterLink>
            </div>
            <div class="showapp">
            <RouterView></RouterView>
        </div>
        </div>

        
    </div>
      
</template>

<script lang="ts" setup>
import { RouterView,RouterLink } from 'vue-router';
</script>

<style scoped>
 .app{
    /* text-align: center; */
    h2{
        margin: 100px 0;
        text-align: center;
    }
    .header{
        display: flex;
        flex-direction: row;
        .Navs{
            width: 300px;
            margin-right: 50px;
            border: 1px solid #ccc;
            border-radius: 5px;
            color: black;

            a{
                text-decoration: none;
                color: black;
                display: block;
                width: 100%;
                box-sizing: border-box;
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                border: 1px solid #ccc;
            } 
            .active{
                    background-color: rgb(30, 166, 220);
                    color: #fff;
                }
            
        }
        .showapp{
            height: 80%;
            width: 100%;
        }
    }
 }
</style>